<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="报工记录" name="first">
        <itemA :datas="productionData"></itemA>
      </el-tab-pane>
      <!-- <el-tab-pane label="称量记录" name="second">
        <itemB :datas="productionData"></itemB>
      </el-tab-pane> -->
      <el-tab-pane label="投料记录" name="third">
        <itemC :datas="productionData"></itemC>
      </el-tab-pane>
      <!-- <el-tab-pane label="质检记录" name="fourth">
        <itemD :datas="productionData"></itemD>
      </el-tab-pane> -->
      <el-tab-pane label="其他记录" name="fifth">
        <itemE :datas="productionData"></itemE>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Data">
import { ref, toRefs, watch } from "vue";
import itemA from "./itemA";
// import itemB from "./itemB";
import itemC from "./itemC";
// import itemD from "./itemD";
import itemE from "./itemE";
// const tableData1 = ref([]);
// const tableData2 = ref([]);
// const tableData3 = ref([]);
const productionData = ref([]);
const activeName = ref("first");
const props = defineProps(["workgroup"]);
const { workgroup } = toRefs(props);

watch(
  workgroup,
  (val) => {
    productionData.value = val;
    console.log(val, "ddd");
  },
  { immediate: true }
);

function handleTabClick() {}
</script>
<style lang="scss" scoped></style>
